<template>
  <div id="app">
    <router-view />
    <van-tabbar route v-model="active" active-color="#fc0636" inactive-color="#7f7f7f" style="border-top:solid 1px #eceef0">
      <van-tabbar-item replace to="/Home">
        <span>首页</span>
        <img slot="icon" slot-scope="props" :src="props.active ? homeIcon.active : homeIcon.inactive" />
      </van-tabbar-item>
      <van-tabbar-item replace to="/Classify">
        <span>分类</span>
        <img slot="icon" slot-scope="props" :src="props.active ? classifyIcon.active : classifyIcon.inactive" />
      </van-tabbar-item>
      <van-tabbar-item replace to="/Shopping">
        <span>购物车</span>
        <img slot="icon" slot-scope="props" :src="props.active ? shoppingIcon.active : shoppingIcon.inactive" />
      </van-tabbar-item>
      <van-tabbar-item replace to="/Me">
        <span>我的</span>
        <img slot="icon" slot-scope="props" :src="props.active ? meIcon.active : meIcon.inactive" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      active: 0,
      homeIcon: {
        active: require('./assets/images/navTab/tab1s.png'),
        inactive: require('./assets/images/navTab/tab1.png')
      },
      classifyIcon: {
        active: require('./assets/images/navTab/tab2s.png'),
        inactive: require('./assets/images/navTab/tab2.png')
      },
      shoppingIcon: {
        active: require('./assets/images/navTab/tab3s.png'),
        inactive: require('./assets/images/navTab/tab3.png')
      },
      meIcon: {
        active: require('./assets/images/navTab/tab4s.png'),
        inactive: require('./assets/images/navTab/tab4.png')
      },
    }
  }
}
</script>

<style>
/* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
#app {
  background-color: #f8f8f8;
}
</style>
